<template>
  <view class="machineDetail">
    <pagehead>兑换申请</pagehead>
    <scroll-view scroll-y class="machineDetail-scroll" @scrolltolower="lower()" v-if="isShowPage">
      <view class="machineDetail-list" v-if="list.length != 0">
        <view v-for="(item) in list" :key="item.id" class="machineDetail-item">
          <!-- <view class="top">
            <view class="name">{{ item.name }}</view>
            <view class="right">{{ item.phone | conceal(4) }}
              <image :src="IMAGE_STATIC+'/images/copy.png'" @click="$tools.copy(item.phone)" class="ico" mode="heightFix" />
            </view>
          </view> -->
          <view class="info">
            <view class="label">兑换机具</view>
            <view class="des">{{ item.goods_name }}</view>
          </view>
          <view class="info">
            <view class="label">机具数量</view>
            <view class="des">{{ item.goods_num }}</view>
          </view>
          <view class="info">
						<view class="label">取货方式</view>
						<view class="des">{{ item.send_type=='01'?'快递':'自取' }}</view>
					</view>
          <view class="info">
            <view class="label">机具状态</view>
            <view class="des">{{ getStatus(item.status) }}</view>
          </view>
          <view class="info" v-if="item.send_type=='01'">
            <view class="label">收货人姓名</view>
            <view class="des">{{ item.name }}</view>
          </view>
          <view class="info" v-if="item.send_type=='01'">
            <view class="label">收货人电话</view>
            <view class="des">{{ item.tel }}</view>
          </view>
          <view class="info" v-if="item.send_type=='01'">
            <view class="label">收货人地址</view>
            <view class="des">{{ item.address }}</view>
          </view>
          <view class="info">
            <view class="label">机具是否划拨</view>
            <view class="des">{{ item.transfer_status=='1'?'是':'否' }}</view>
          </view>
          <view class="info" v-if="item.transfer_status=='1'">
            <view class="label">购买会员账号</view>
            <view class="des">{{ item.buy_sys_user_account}}</view>
          </view>
          <view class="info" v-if="item.transfer_status=='1'">
            <view class="label">购买会员姓名</view>
            <view class="des">{{ item.buy_nick_name }}</view>
          </view>
          <view class="info" v-if="item.shipper_name">
						<view class="label">物流公司</view>
						<view class="title">{{ item.shipper_name }}</view>
					</view>
					<view class="info" v-if="item.shipper_code">
						<view class="label">快递单号</view>
						<view class="des">
							{{ item.shipper_code }}
							<text @tap.stop="$tools.copy(item.shipper_code)">| <text class="copy">复制</text></text>
						</view>
					</view>
          <view class="info" v-if="!(item.is_transfer_reward ==null || item.is_transfer_reward ==undefined )">
            <view class="label">激活奖励</view>
            <view class="des">{{ item.is_transfer_reward == 0 ? '自己' : '伙伴' }}</view>
          </view>
          <view class="info" v-if="item.transfer_status=='1'  ">
            <view class="label">划拨机具</view>
            <view class="des"><text class="red" :data-snList="item.sn_code_list"  @tap.stop="viewData">点击查看</text></view>
          </view>
          <view class="bottom" v-if="(item.transfer_status=='0' && item.status!='05') || item.status=='02' ">
            <view class="btn" v-if="item.transfer_status=='0' && (item.status=='00' || item.status=='02' || item.status=='03')" :data-orderId="item.order_id" @tap.stop="refund($event,item.order_id)">退还</view>
            <view class="btn" v-if="item.status=='02'" :data-orderId="item.order_id" @tap.stop="submit($event,item.order_id)">发货</view>
            <view class="btn btn-primary" v-if="item.transfer_status=='0' && item.status!='05'" @tap.stop="$tools.jump('./machineManage',item.order_id,item.pos_name_id
            )">划拨机具</view>
          </view>
        </view>
      </view>
      <view class="initNoData" v-if="list.length == 0">—暂无内容—</view>
    </scroll-view>
    <!-- 发货 -->
		<uni-popup ref="payPopup" type="bottom" :animation="true" @change="changePopup($event,'payPopup')">
			<view class="modalPsd">
				<view class="modal-wrapper">
					<view class="formBox">
						<view class="formBox-wrapper">
							<view class="formBox-header">发货 <text class="cancel" @tap.stop="hidePopup('payPopup')">取消</text></view>
              <view class="formBox-box">
                <view class="formBox-item">
                  <view class="formBox-item-label">
                    物流公司
                  </view>
                  <u--input class="formBox-item-inner" placeholder="请输入物流公司" type="text" customStyle=""
                    border="none" v-model="form.shipper_name">
                  </u--input>
                </view>
                <view class="formBox-item">
                  <view class="formBox-item-label">
                    快递单号
                  </view>
                  <u--input class="formBox-item-inner" placeholder="请输入快递单号" type="text" customStyle=""
                    border="none" v-model="form.shipper_code">
                  </u--input>
                </view>
              </view>
              <view class="submit" @tap.stop="send()">
                发货
              </view>
					</view>
				</view>
			</view>
			</view>
		</uni-popup>
    <!-- 查看机具编号列表-->
		<uni-popup ref="snPopup" type="bottom" :animation="true" @change="changePopup($event,'snPopup')">
			<view class="modalPsd">
				<view class="modal-wrapper">
					<view class="formBox">
						<view class="formBox-wrapper">
							<view class="formBox-header">划拨机具 <text class="cancel" @tap.stop="hidePopup('snPopup')">取消</text></view>
              <view class="search-box">
                <view class="search">
                  <image :src="IMAGE_STATIC+'/images/icon-search.png'" class="ico" mode="heightFix" />
                  <input type="text" v-model="keyword" placeholder="请输入要搜索的机具编号">
                </view>
                <view class="btn" @tap.stop="search()">搜索</view>
              </view>
              <view class="ul">
                <view class="li">
                  <view class="p th">序列</view>
                  <view class="p th">机具编号</view>
                </view>
                <view class="ul-content">
                <view class="li" v-for="(item,index) in snLlist" :key="index">
                  <view class="p">{{index}}</view>
                  <view class="p">{{item}}</view>
                </view>
              </view>
              </view>
					</view>
				</view>
			</view>
			</view>
		</uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      IMAGE_STATIC: this.$url.assetsPath,
      currentIndex: 0,
      type: '',
      pageIndex: 1,
      pageSize: 10,
      lastId: '',
      lsShow: true,
      isShowPage: true,
      total: 0,
      list: [
        { id: 1, name: '张三三', phone: '18529524578' ,mac:'机具',num:100}
      ],
      form:{},
      orderId:'',
      keyword:'',
      snLlist:[],
      snLlistAll:[
        '11','00','11','00','11','00','11','00','11','00','11','11','00',
        '00','11','00','11','00','11','00','11','00','11','00','11','00',
      ],
    };
  },
  computed:{
    getStatus(){
      // 00-全部订单01-待付款订单02-待发货订单03-待收货订单04-交易完成订单05-已取消订单
      return function(type){
        switch (type){
          case '00':
            return '待付款';
            break;
          case '02':
            return '待发货';
            break;
          case '03':
            return '待收货';
            break;
          case '04':
            return '已取消 ';
            break;
          case '05':
            return '退款';
            break;
          case '08':
            return '已冻结';
            break;
          case '09':
            return '已完成';
            break;
        }
      }
    },
  },
  onLoad(options) {
    if (options) {
      this.type = options.value1
    }
  },
  onShow() {
    this.init();
  },
  // 下拉刷新
  onPullDownRefresh() {
    console.log('refresh');
    this.init();
    this.isLoadShow = true;
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
  onReachBottom() {
    console.log('dd')
    if (this.lsShow == true) {
      this.getGoodsList();
    } else {
      // return this.$tools.toast('到底了');
    }
  },
  methods: {
    init() {
      this.pageIndex = 1
      this.pageSize = 10
      this.lastId = '';
      this.list = [];
      this.getGoodsList();
    },
    // 切换
    changeTab(index) {
      if (this.currentIndex != index) {
        this.currentIndex = index
        // this.init()
      }
    },
    // 商品列表
    getGoodsList() {
      let that = this;
      var data = {
        last_id:this.lastId
      };
      console.log("data", data);
      uni.showLoading({
        mask: true
      })
      that.$Ajax('/api/productOrder/getSellerOrderList', data, res => {
        uni.hideLoading();
        that.isShowPage = true;
        that.list = that.list.concat(res.data.sellerOrderList);
        this.total = res.total
        console.log('list', this.list)
        if(res.data.sellerOrderList.length>0){
          this.lastId = res.data.sellerOrderList[res.data.sellerOrderList.length-1].id
          this.lsShow = true
        }else{
          this.lsShow = false
        }
      }, err => {
        uni.hideLoading();
        that.isShowPage = true;
      }
      );
    },
    // 退货
    refund(event){
      // console.log('event',event.target.dataset.orderid,item )
      const orderId = event.target.dataset.orderid
      let that = this;
      uni.showModal({
        title: '提示',
        content: '确定退还？',
        showCancel: true,
        success: ({ confirm, cancel }) => {
          if(confirm){
            console.log('确定')
            uni.showLoading({
              mask: true
            })
            const data = {
              order_id:orderId
            }
            console.log('data',data)
            that.$Ajax('/api/seller/productOrder/refundProductOrder', data, res => {
              uni.hideLoading();
              that.$tools.toast('操作成功')
              that.init()
            },err => {
              uni.hideLoading();
            }
          )
          }
        }
      })
    },
    // 发货
    submit(event,orderId){
      console.log('event',event.target.dataset.orderid)
      this.orderId = event.target.dataset.orderid
      this.openPopup('payPopup');
    },
    // 发货提交
    send(){
      if (!this.form.shipper_name) {
				return this.$tools.toast('请输入物流公司');
			}
      if (!this.form.shipper_code) {
				return this.$tools.toast('请输入快递单号');
			}
      var data = {
        order_id:this.orderId,
        shipper_name:this.form.shipper_name,
        shipper_code:this.form.shipper_code,
      };
      console.log("data", data);
      uni.showLoading({
        mask: true
      })
      this.$Ajax('/api/seller/productOrder/sendProductOrder', data, res => {
        uni.hideLoading();
        this.$tools.toast('发货成功')
        this.init()
        this.hidePopup('payPopup')
      }, err => {
        uni.hideLoading();
      }
      );
    },
    // 查看
    viewData(event){
      // console.log('event', event.target.dataset.snlist)
      let snList = {...event.target.dataset}.snlist
      console.log('snList', snList)
      // this.snLlistAll = (item.sn_code_list).split(',')
      this.snLlistAll = snList.split(',')
      this.snLlist = JSON.parse(JSON.stringify(this.snLlistAll)) 
      console.log('sn_code_list',this.snLlistAll)
      this.keyword = ''
      this.openPopup('snPopup');
    },
    search(){
      const arr = this.searchArr(this.snLlistAll,this.keyword)
      this.snLlist = arr
      console.log('arr',arr)
    },
    /**
      * @param targetArr 对哪个*对象数组*进行模糊搜索
      * @param attribute (数组中某个元素)对象的属性名
      * @param keyword 搜索关键字
    */
    searchArr(targetArr, keyword) {
      // 创建一个空数据，用来存放筛选后的结果
				let result = [];
				// 遍历data
				targetArr.forEach(function(item) {
					// 检查每一个keyword的值是否大于等于 0
					if (item.indexOf(keyword) >= 0) {
						// 如果keyword的值大于等于0，就把这个元素添加到result的数组中
						result.push(item);
					}
				});
      return result
    },
    lower() {
      console.log("分页");
      if (this.lsShow == true) {
        this.getGoodsList();
      } else {
        // return this.$tools.toast('到底了');
      }
    },
    /* 弹出框公用 */
    openPopup(e, item) {
      this.popupInfo = item;
      this.$refs[e].open();
    },
    hidePopup(e) {
      this.$refs[e].close();
      this.password = '';
    },
    changePopup(e) {
      console.log('popup ' + e.type + ' 状态', e.show);
    },
  },
};
</script>

<style lang="scss" scoped>
.machineDetail {
  padding-bottom: 60rpx;
  .tab {
    @include flexBetween;
    background: #FFFFFF;
    padding: 32rpx 38rpx;

    .item {
      width: 200rpx;
      text-align: center;
      height: 60rpx;
      line-height: 60rpx;
      font-size: 24rpx;
      color: #666;
      background: #F3F4F9;
      border-radius: 134rpx;
    }

    .active {
      background: #AD2926;
      color: #fff;
    }
  }

  &-scrol {
    overflow: hidden;
  }

  &-item {
    overflow: hidden;
    width: 93.6%;
    margin: auto;
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx 0;
    margin-top: 24rpx;
    font-size: 24rpx;
    color: #000000;

    .top {
      @include flexBetween;
      padding: 0 28rpx;
      padding-bottom: 32rpx;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);

      .name {
        font-size: 28rpx;
      }
    }

    .ico {
      width: 32rpx;
      height: 32rpx;
      display: inline-block;
      vertical-align: middle;
      margin-left: 8rpx;
    }

    .info {
      @include flexBetween;
      padding: 0 28rpx;
      margin-top: 24rpx;

      .label {
        font-size: 28rpx;
        color: #999999;
      }
      .des{
        font-size: 28rpx;
        color: #333;
        text-align: right;
        max-width: calc(100% - 140rpx);
      }
      .red{
        color: #AD2926;
      }
    }
    .info:nth-of-type(1) {
      margin-top: 0;
    }
    .bottom{
      @include flexBetween;
      padding-top: 40rpx;
      margin: 24rpx 20rpx 0 20rpx;
      border-top: 1px solid #E7E7E7;
      .btn{
        // width: 248rpx;
        padding: 0 62rpx;
        text-align: center;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 108rpx;
        border: 2rpx solid rgba(173, 41, 38, 1);
        font-size: 32rpx;
        color: #AD2926;
      }
      .btn-primary{
        background: #AD2926;
        color: #fff;
      }
    }
  }

  image {
    width: 100%;
    height: 100%;
  }
}
.modalPsd{
  background: #fff;
  .formBox{
  &-header{
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			color: #000;
			text-align: center;
			padding: 48rpx 0 20rpx;
		}
		.cancel{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			position: absolute;
			top: 48rpx;
			right: 52rpx;
		}
    &-wrapper{
      padding: 32rpx;
      padding-top: 0;
    }
    &-item{
      margin-top: 24rpx;
      &-label{
        font-weight: bold;
        font-size: 28rpx;
        color: rgba(0,0,0,0.9);
        line-height: 41rpx;
      }
      &-inner{
        height: 108rpx;
        background: #F9F9F9;
        border-radius: 20rpx;
        padding: 0 20rpx;
        margin-top: 10rpx;
      }
    }
  .submit{
		height: 90rpx;
		line-height: 90rpx;
		background: #AD2926;
		border-radius: 118rpx;
		width: 92%;
		margin: 20rpx auto;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		margin-top: 60rpx;
  }
  }
  .search-box{
    margin-top: 48rpx;
    height: 72rpx;
    background: #F9F9F9;
    border-radius: 58rpx;
    @include flexLeft;
    .search{
    @include flexLeft;
      width: calc(100% - 176rpx);
      padding: 12rpx 26rpx;
    }
    input{
      font-weight: 500;
      font-size: 28rpx;
      color: #333;
      line-height: 36rpx;
      margin-left: 12rpx;
    }
    .ico{
      width: 38rpx;
      height: 38rpx;
    }
    .btn{
      width: 176rpx;
      text-align: center;
      height: 60rpx;
      line-height: 60rpx;
      background: #AD2926;
      border-radius: 1998rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #FFFFFF;
    }
  }
  .ul {
    margin-top: 20rpx;
    .ul-content{
      max-height: 300px;
      overflow-y: auto;
    }
  .li {
    @include flexLeft;
    text-align: center;
    font-size: 24rpx;
    color: #999999;
    border: 1px solid #EBEBEB;
    .p {
      width: 50%;
      padding: 24rpx 0;
      background: #F9F9F9;
      font-weight: 500;
      font-size: 28rpx;
      color: #999999;
      line-height: 36rpx;
    }
    .th {
      background: #F5F7FA;
    }
  }
  .li:nth-of-type(2) .p {
  }
}
}
</style>
